<template>
  <div class="app-container">
    <el-row :gutter="20" class="div-height-left">
      <el-col :span="24" :xs="24" class="div-height-left">
        <el-row>
          <el-col :span="7"> 
            <div class="search-container">
              <el-form v-show="showSearch" ref="queryParamsRef" :inline="true" :model="queryParams" label-width="100px">
                <el-form-item v-if="!userInfo.orgId" label="所属机构">
                  <select-org-tree :value="queryParams.orgId" @orgNodeClick="orgNodeClick"/>
                </el-form-item>
                <el-form-item label="消耗品名称" prop="materialName">
                  <el-input
                    v-model="queryParams.materialName"
                    clearable
                    placeholder="请输入消耗品名称、编码、拼音"
                    @keyup.enter="handleQuery"
                  />
                </el-form-item>
                
                <el-form-item>
                  <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery"/>
                </el-form-item>
              </el-form>
            </div>
            <el-table v-adaptive :border="true" :data="materialInfoList" :header-cell-style="$headerCellStyle"
                      :stripe="true" highlight-current-row 
                      @row-click="materialInfoRowClick"> 
              <el-table-column :align="'center'" label="消耗品名称" prop="materialName"/>
              <el-table-column :align="'center'" label="消耗品编码" prop="materialCode"/>
              <el-table-column :align="'center'" label="规格" prop="packageSpec"/>
              <el-table-column :align="'center'" label="厂家名称" prop="firmName" width="260px"/> 
            </el-table>

            <pagination
              v-show="total>0"
              v-model:limit="queryParams.pageSize"
              v-model:page="queryParams.pageNum"
              :total="total"
              @pagination="getMaterialList"
            />
          </el-col>
          <el-col :span="17"> 
            <div class="search-container">
            <el-table v-adaptive :data="materialPriceList" :border="true" highlight-current-row :stripe="true"
              :header-cell-style="$headerCellStyle">
              <el-table-column :align="'center'" type="selection" width="55" />
              <el-table-column :show-overflow-tooltip="true" :align="'center'" fixed="left" label="是否供应"
                prop="supplySign" width="70px">
                <template #default="scope">
                  <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.supplySign" />
                </template>
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" :align="'left'" fixed="left" label="消耗品名称" prop="materialName"
                width="180px">
                <template #default="scope">
                  <span class="fz14 fw-bold">{{ scope.row.materialName }}</span>
                </template>
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" :align="'left'" label="消耗品编码" prop="materialCode"
                width="130px" />
              <el-table-column :show-overflow-tooltip="true" :align="'left'" label="规格" prop="packageSpec"
                width="120px" />
              <el-table-column :show-overflow-tooltip="true" :align="'center'" label="单位" prop="units" width="70px">
                <template #default="scope">
                  <dict-data-tag :options="dictDataMap['spec_unit']" :value="scope.row.units" />
                </template>
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" :align="'center'" label="进价(元)" prop="tradePrice"
                width="90px" />
              <el-table-column :show-overflow-tooltip="true" :align="'center'" label="售价(元)" prop="retailPrice"
                width="90px" />
              <el-table-column :show-overflow-tooltip="true" :align="'center'" label="起用日期" prop="startDate"
                width="140">
                <template #default="scope">
                  <span>{{
                    $parseTime(scope.row.startDate, "{y}-{m}-{d} {h}:{i}:{s}")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" :align="'center'" label="停止日期" prop="stopDate" width="140">
                <template #default="scope">
                  <span>{{
                    $parseTime(scope.row.stopDate, "{y}-{m}-{d} {h}:{i}:{s}")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" :align="'center'" label="最高限价(元)" prop="priceMax"
                width="100px" />
              <el-table-column :show-overflow-tooltip="true" :align="'center'" label="备注信息" prop="remarks" />
              <el-table-column :align="'center'" class-name="small-padding fixed-width" fixed="right" label="操作"
                width="260px">
                <template #default="scope">
                  <el-button v-hasPerm="['base:price:remove']" :type="!scope.row.stopDate ? 'danger' : 'success'"
                    @click="stopPriceFun(scope.row)">
                    <svg-icon :icon-class="!scope.row.stopDate ? 'stop' : 'start'" class="mr5" />
                    {{ !scope.row.stopDate ? "停价" : "启用" }}
                  </el-button>

                  <el-button :type="scope.row.supplySign === 'Y' ? 'danger' : 'success'"
                    @click="stopSupplySign(scope.row)">
                    <svg-icon :icon-class="scope.row.supplySign === 'Y' ? 'stop' : 'start'" class="mr5" />
                    {{ scope.row.supplySign === "Y" ? "停止供应" : "恢复供应" }}
                  </el-button>
                </template>
              </el-table-column>

              <pagination
              v-show="priceTotal > 0"
              v-model:limit="queryPriceParams.pageSize"
              v-model:page="queryPriceParams.pageNum"
              :total="priceTotal"
              @pagination="getList"
            />
            </el-table>
          </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
export default {
  name: "MaterialPrice"
}
</script>

<script lang="ts" setup>
import {
  selectPageMaterialPrice,
  stopMaterialPrice,
  supplySignStopOrRestore 
} from "@/api/material/materialPrice";
import { 
  selectPageMaterialInfo
} from "@/api/material/materialInfo";
import {useDictStoreHook} from "@/store/modules/dict";
import {useUserStoreHook} from "@/store/modules/user";

const useUserStore = useUserStoreHook();
const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('spec_unit','sys_yes_no'))


const {proxy} = getCurrentInstance() as any;
const userInfo = <UserInfoBusi>useUserStore.user.userInfo

const formRef = ref();
const queryParamsRef = ref() 
const materialPriceList = ref([]);
const materialInfoList = ref([]);
const open = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const priceTotal = ref(0);

const queryParams = ref<any>({
  pageNum: 1,
  pageSize: 10,
  materialName: "",
  orgId: userInfo.orgId,
})

const queryPriceParams = ref<any>({
  pageNum: 1,
  pageSize: 10,
  materialInfo: "",
  orgId: userInfo.orgId,
})

if (userInfo.orgId) {
  queryParams.value.orgId = userInfo.orgId
  getMaterialList()
}

// 机构树点击事件
function orgNodeClick(data, _e) {
  queryParams.value.orgId = data.orgId
  getMaterialList()
}

/** 查询消耗品信息列表 */
function getMaterialList() {
  selectPageMaterialInfo(queryParams.value).then((response: any) => {
    materialInfoList.value = response.rows;
    total.value = response.total;
  });
}

/** 查询消耗品价格列表 */
function getList() {
  selectPageMaterialPrice(queryPriceParams.value).then((response: any) => {
    materialPriceList.value = response.rows; 
    priceTotal.value = response.total;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getMaterialList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParamsRef.value.resetFields()
  // proxy.resetForm("queryRef");
  handleQuery();
}

/** 左侧药品字典点击事件 */
function materialInfoRowClick(row) {
  queryPriceParams.value.materialInfo = row.materialInfoId;
  queryPriceParams.value.orgId = row.orgId;
  getList();
}
/** 停价 */
function stopPriceFun(row) {
  ElMessageBox.confirm(
    `确定要${!row.stopDate ? "停用" : "启用"}"${row.bo.materialName}"此消耗品吗？`,
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      row.stopDate = !row.stopDate ? new Date().getTime() : "";
      stopMaterialPrice(row).then(() => {
        getList();
        ElMessage.success(`${row.supplySign === "Y" ? "已停价" : "已启价"}`);
      });
    })
    .catch(() => { });
}
/** 停止供应 */
function stopSupplySign(row) {
  ElMessageBox.confirm(
    `确定要将"${row.materialName}"消耗品${row.supplySign === "Y" ? "停止供应" : "恢复供应"
    }吗？`,
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      row.supplySign = row.supplySign === "Y" ? "N" : "Y";
      supplySignStopOrRestore(row).then(() => {
        getList();
        ElMessage.success(`${row.supplySign === "Y" ? "已恢复供应" : "已停止供应"}`);
      });
    })
    .catch(() => { });
}

getMaterialList();
</script>
